<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>create video</title>
</head>
<body>

    <div>
        <input type="button" value="开始" id="start">
        <input type="button" value="暂停" id="pause">
    </div>

    <script>
        function urlValueToDom () {
            const query = location.search.substr(1)
            const obj = {}


            query.split('&').map(function (pair) {
                const arr = pair.split('=')
                obj[arr[0]] = decodeURIComponent(arr[1])
            })
            return obj
        }
    </script>
    <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
    <script>
        var vConsole = new VConsole();
        console.log('Hello world');
    </script>
    <script>
        var start = document.getElementById('start')
        var pause = document.getElementById('pause')

        const query = urlValueToDom()
        var stream = query.stream
        if (!stream) {
            alert('stream not found')
        }

        function createVideo () {
            var video = document.createElement('video')
            video.setAttribute('preload', 'none')
            video.setAttribute('x5-video-player-type', 'h5-page')
            video.setAttribute('webkit-playsinline', 'true')
            video.setAttribute('playsinline', '')
            video.setAttribute('x-webkit-airplay', 'allow')
            return video
        }

        start.onclick = function () {
            var video = createVideo()
            document.body.appendChild(video)
            video.src = stream

            video.play()
            pause.onclick = function () {
                video.pause()
            }
        }
        


    </script>
</body>
</html>